<template>
  <div class="mobile-travel-record-form common-mobile-view">
    <el-form ref="formRef" :model="travelStore.currentTravelRecord"
             :rules="rules" label-width="80">
      <el-form-item label="景点名称" prop="name">
        <el-select
            v-model="travelStore.currentTravelRecord.name"
            @focus="travelStore.queryTravelSpotNameList()"
            :disabled="travelStore.travelRecordApiType === 'UPDATE'"
            placeholder="请选择景点名称">
          <el-option
              v-for="(item, index) in travelStore.travelSpotNameList"
              :key="index" :label="item" :value="item"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="旅行日期" prop="date">
        <el-date-picker
            v-model="travelStore.currentTravelRecord.date"
            type="date" placeholder="请选择日期"
            value-format="YYYY-MM-DD"/>
      </el-form-item>

      <el-form-item label="旅行人员" prop="persons">
        <el-input-tag v-model="travelStore.currentTravelRecord.persons"
                      :max="3" placeholder="请输入旅行人员" />
      </el-form-item>

      <el-form-item label="图片">
        <upload-image v-model="travelStore.currentTravelRecord.imageList"
                      :service-url="fileServiceUrl"
                      :image-limit="3"
                      :service-file-root-path="serviceFileRootPath"
                      :image-path="travelStore.travelImagePath"/>
      </el-form-item>

      <el-form-item label="视频">
        <upload-video v-model="travelStore.currentTravelRecord.videoList"
                      :service-url="fileServiceUrl"
                      :image-limit="3"
                      :service-file-root-path="serviceFileRootPath"
                      :video-path="travelStore.travelVideoPath"
                      style="width: 100%;"/>
      </el-form-item>

      <div class="video-list">
        <video v-for="(item, index) in travelStore.currentTravelRecord.videoList"
               :key="index" controls style="width: 60%; min-height: 200px;">
          <source :src="serviceFileRootPath + item" type="video/mp4">
          您的浏览器不支持 HTML5 视频
        </video>
      </div>
    </el-form>

    <div class="button-container">
      <el-button type="primary" @click="confirmClick">确认</el-button>
      <el-button type="danger" @click="deleteClick">删除</el-button>
      <el-button type="info" @click="cancelClick">取消</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { UploadImage, UploadVideo } from 'vue3-common'
import { useTravelStore } from '@/store/travel.ts'
import { ref, reactive } from 'vue'
import { FormRules } from 'element-plus'
import { travelRecordRules } from '@/utils/element/elRules.ts'
import { fileServiceUrl, serviceFileRootPath } from '@/utils'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'

const rules = reactive<FormRules>(travelRecordRules)

const formRef = ref()
const travelStore = useTravelStore()

/**
 * 点击确认按钮
 */
const confirmClick = () => {
  formRef.value.validate().then(() => {
    travelStore.handleTravelRecordApi(travelStore.currentTravelRecord)
    history.back()
  })
}

const cancelClick = () => {
  history.back()
}

const deleteClick = () => {
  commonElMessageBox('是否确认删除该记录?').then(() => {
    travelStore.travelRecordApiType = 'DELETE'
    travelStore.handleTravelRecordApi(travelStore.currentTravelRecord)
    history.back()
  })
}
</script>

<style lang="scss">
.mobile-travel-record-form {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .video-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .button-container {
    align-self: center;
  }
}</style>
